<template>
  <el-dialog v-model="openFlag" width="80%">
    <div class="print-container">
      <div class="print-header">
        <div class="print-title">资产调拨</div>
        <button type="button" class="print-btn" @click="handlePrint"><span>打印</span></button>
      </div>
      <div class="print-content" id="print-container">
        <div class="print-document-info">
          <h2>单据信息</h2>
          <table class="print-table">
            <tr>
              <td>单据编号</td>
              <td>ZCCL2024041100001</td>
            </tr>
            <tr>
              <td>调出公司</td>
              <td>欧科华创</td>
            </tr>
            <tr>
              <td>调出管理员</td>
              <td>欧科</td>
            </tr>
            <tr>
              <td>调出时间</td>
              <td>2024-08-29</td>
            </tr>
            <tr>
              <td>调入公司</td>
              <td>欧科华创</td>
            </tr>
            <tr>
              <td>调入管理员</td>
              <td>欧科</td>
            </tr>
            <tr>
              <td>调入时间</td>
              <td>2024-08-29</td>
            </tr>
            <tr>
              <td>调入位置</td>
              <td>-</td>
            </tr>
            <tr>
              <td>调出说明</td>
              <td>-</td>
            </tr>
            <tr>
              <td>备注</td>
              <td>-</td>
            </tr>
          </table>
          <h2>资产列表</h2>
          <table class="print-table">
            <tr>
              <th>序号</th>
              <th>资产名称</th>
              <th>规格型号</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
            </tr>

            <tr v-for="(asset, index) in assets" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ asset.name }}</td>
              <td>{{ asset.model }}</td>
              <td>{{ asset.quantity }}</td>
              <td>{{ asset.unitPrice }}</td>
              <td>{{ asset.amount }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>

import print from 'print-js'

const openFlag = ref(false);
const assets = ref([

  { name: '电脑', model: '联想小新', quantity: '1', unitPrice: '5000', amount: '5000' },
  { name: '显示器', model: '戴尔U2419H', quantity: '1', unitPrice: '2000', amount: '2000' },

]);

function open() {
  openFlag.value = true;
}
function handlePrint() {

  print({
    printable: 'print-container',
    type: 'html',
    scanStyles: true,
    targetStyles: ['*']
  });

}

defineExpose({
  open
})

</script>

<style scoped>
.print-container {
  padding: 20px;
}

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.print-title {
  font-size: 24px;
  font-weight: bold;
}

.print-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.print-btn:hover {
  background-color: #0056b3;
}
.print-btn {
  display: block;
}

@media print {
  .print-btn {
    display: none;
  }
}

.print-content {
  page-break-after: always;
}

.print-document-info,
.print-asset-list {
  page-break-after: always;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.print-table th,
.print-table td {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

.print-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333333;
}

.print-table td {
  color: #666666;
}
</style>